<template>
  <div class="mapplan">
    <div id="myMap" class="map-box"></div>
  </div>
</template>

<script>
// import {mapGetters} from 'vuex'
import * as L from "leaflet";

import "leaflet-rotatedmarker";
import "leaflet/dist/leaflet.css";


export default {
  props: {
    picCompInfo: {
      default() {
        return {};
      },
    },
    airlineInfo: {
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      map: null,
      My_marker: null,
      Nest_marker: null,
      maksGroup: null,
      getMapInfo: null,
      getMapInfoYes: null,
      currlAirLineGraph: null,
      curRegions:[],
      curAirlineData: null,
      myAirlineInfo: "",
      myShareMark:null
    };
  },
  mounted() {
    this.initMap();
  },
  computed: {
    // ...mapGetters([
    //   'curr_nest',
    //   'curr_record'
    // ])
  },
  watch: {
    airlineInfo: {
      handler(n, o) {
        console.log(n);
        this.myAirlineInfo = n;
      },
    },
  },
  created() {},
  methods: {
    showMapPoint(bool) {
      var _this = this;
      if (bool == false) {
        _this.map.removeLayer(_this.maksGroup);
      } else {
        _this.map.addLayer(_this.maksGroup);
      }
    },
    initMap() {
      var _this = this;
      //地图
      _this.map = L.map("myMap", {
        center: [28.8, 118.5],
        zoom: 15,
        invalidateSize: true,
        attributionControl: false, // 移除右下角leaflet标识
      });
      L.tileLayer("https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=a6a4651c01e36192542d51da6033bb71", {
        maxZoom: 17,
        subdomains:['0','1','2','3','4','5','6','7']
      }).addTo(_this.map);
      L.tileLayer("https://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=a6a4651c01e36192542d51da6033bb71", {
        maxZoom: 17,
        subdomains:['0','1','2','3','4','5','6','7']
      }).addTo(_this.map);
      //照片位置
      var myIcon = L.icon({
        iconUrl: "http://guihuao.com/2021/Kanban/Ai/images/picmark.png",
        iconSize: [30, 30],
        iconAnchor: [15, 15],
      });
      _this.My_marker = L.marker([28.8, 118.5], {
        icon: myIcon,
      }).addTo(_this.map);
      //机巢位置
      // var nestIcon = L.icon({
      //   iconUrl: "http://guihuao.com/2021/Kanban/Ai/images/nest.png",
      //   iconSize: [30, 40],
      // });
      // _this.Nest_marker = L.marker([28.8, 118.5], { icon: nestIcon }).addTo(
      //   _this.map
      // );
    },
    getMap() {
      console.log("绘制map元素");
      var that=this;
      console.log(this.picCompInfo);
      this.map._onResize();

      //重新绘制照片点
     
      if (this.picCompInfo.exif_xmp) {
        var myIcon1 = L.icon({
          iconUrl: "http://guihuao.com/2021/Kanban/Ai/images/picmark.png",
          iconSize: [30, 30],
          iconAnchor: [15, 15],
        });
        if(that.My_marker){
          that.map.removeLayer(that.My_marker);
        }
        that.My_marker = L.marker(
          [ 
            that.picCompInfo.exif_xmp.latitude,
            that.picCompInfo.exif_xmp.longitude,
          ],
          {
            icon: myIcon1,
            alt: "1",
          }
        ).addTo(that.map);
        that.My_marker.setRotationAngle(that.picCompInfo.exif_xmp.flight_yaw); //这是设置无人机机头角度
      }

      //航线改变时重新绘制
      var lines = this.myAirlineInfo.waypoints;
      if (this.curAirlineData != lines) {
        this.curAirlineData = lines;
        console.log(lines);
        var obj = JSON.parse(lines);
        var pointArr = [];
        if (obj.linePointsList) {
          if (obj["linePointsList"]) {
            var positions = obj["linePointsList"];
            if (positions[0] instanceof Array) {
              positions = positions[0];
            }
            for (var i = 0; i < positions.length; i++) {
              if (positions[i]["location"]) {
                var data = [
                  positions[i]["location"]["0"],
                  positions[i]["location"]["1"],
                ];
              }
              pointArr.push(data);
            }
          }
        } else {
          if (obj["mapConfigs"]) {
            var positions = obj["mapConfigs"]["points"];
            if (positions[0] instanceof Array) {
              positions = positions[0];
            }
          } else {
            var positions = obj;
          }

          for (var i = 0; i < positions.length; i++) {
            if (positions[i]["location"]) {
              var data = [
                positions[i]["location"]["lat"],
                positions[i]["location"]["lng"],
              ];
            } else if (positions[i]["wayPointLongitude"]) {
              var data = [
                positions[i]["wayPointLatitude"],
                positions[i]["wayPointLongitude"],
              ];
            }
            pointArr.push(data);
          }
        }
       

        if (this.currlAirLineGraph)
          this.map.removeLayer(this.currlAirLineGraph);
        console.log(pointArr);
        this.currlAirLineGraph = L.polyline(pointArr, { color: "cyan" }).addTo(
          this.map
        );
        this.map.addLayer(this.currlAirLineGraph);

        console.log(this.myAirlineInfo)

        var nest = this.myAirlineInfo.nest_info;
       
      }

      //视角
      if (this.picCompInfo.latitude)
        this.map.setView(
          [this.picCompInfo.latitude, this.picCompInfo.longitude],
          15
        );
      else if (this.picCompInfo.exif_xmp)
        this.map.setView(
          [
            this.picCompInfo.exif_xmp.latitude,
            this.picCompInfo.exif_xmp.longitude,
          ],
          15
        );
      else this.map.setView([nest.latitude, nest.longitude], 15);
      console.log(this.picCompInfo.latitude, this.picCompInfo.longitude);
    },
    addMarks(arr) {
      console.log("清除地图标注");
      var that = this;
      // 清除目标物图层
      this.map.eachLayer(function (obj) {
        if (obj["options"]["alt"]) {
          that.map.removeLayer(obj);
        }
      });

      var layers = [];
      var myIcon = L.icon({
        iconUrl: require("./imgs/marker_red.png"),
        iconSize: [15, 15],
      });
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]["markId"]);
        if (arr[i].status == "0") {
          var layer = new L.marker([arr[i]["latitude"], arr[i]["longitude"]], {
            alt: arr[i]["markId"],
            icon: myIcon,
          });
          this.map.addLayer(layer);
        }
      }
    },
    addSharedMarks(arr) {
      console.log("清除地图标注");
      var that = this;
      // 清除目标物图层
      this.map.eachLayer(function (obj) {
        if (obj["options"]["alt"]) {
          that.map.removeLayer(obj);
        }
      });

      var layers = [];
      var myIcon = L.icon({
        iconUrl: require("./imgs/marker_red.png"),
        iconSize: [15, 15],
      });
      for (var i = 0; i < arr.length; i++) {
        var layer = new L.marker(
          [arr[i]["markPositionLatitude"], arr[i]["markPositionLongitude"]],
          { alt: arr[i]["markId"], icon: myIcon }
        );
        this.map.addLayer(layer);
      }
      this.myShareMark = arr[0]
      
    },
    addMark(lng, lat, id) {
      console.log(lat, lng, id);
      var myIcon = L.icon({
        iconUrl: require("./imgs/marker_red.png"),
        iconSize: [15, 15],
      });
      var layer = new L.marker([lat, lng], { alt: id, icon: myIcon });
      this.map.addLayer(layer);
    },

    deleteMark(id) {
      var that = this;
      console.log(id);
      this.map.eachLayer(function (obj) {
        if (obj["options"]["alt"] && obj["options"]["alt"] == id) {
          that.map.removeLayer(obj);
        }
      });
    },

    newGuid() {
      var guid = "";
      for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if (i == 8 || i == 12 || i == 16 || i == 20) guid += "-";
      }
      return guid;
    },
    invalidateSize() {
      this.map._onResize()
      if(this.myShareMark){
        this.map.setView([this.myShareMark["markPositionLatitude"], this.myShareMark["markPositionLongitude"]], 15);
      }
    }
  },
};
</script>
<style>
  .my-div-icon{
    color: white;
  }
</style>
<style lang="scss" scoped>
.mapplan {
  width: 100%;
  height: 100%;
  .map-box {
    width: 100%;
    height: 100%;
  }
}
.map-select-box {
  position: absolute;
  right: 21px;
  z-index: 650;
  bottom: 50px;
}
.map-select-content {
  transition: all 400ms;
  width: 40px;
  /* height: 40px; */
  top: 0;
  float: right;
  display: flex;
  flex-direction: row;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  position: relative;
  font-size: 14px;
}
.iconfont-color {
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin: auto 0;
}
.map-data {
  width: 80px;
  height: 50px;
  margin: 5px;
  margin-left: 0;
  line-height: 50px;
  cursor: pointer;
}
.map-type {
  width: 14px;
  font-size: 14px;
  height: 100%;
  float: right;
  line-height: 50px;
  background: #2583f4;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.map-type-name {
  display: inline-block;
  vertical-align: middle;
  line-height: 25px;
  color: #fff;
}
.map-select {
  background: #00263d;
}
</style>
